<template>
  <section class="todoapp">
    <TodoHeader @add="add"></TodoHeader>
    <TodoMain :list="list" @del="del"></TodoMain>
    <TodoFooter :list="list" @clear="clear"></TodoFooter>
  </section>
</template>
  
  <script>
import TodoFooter from "./components/TodoFooter.vue";
import TodoHeader from "./components/TodoHeader.vue";
import TodoMain from "./components/TodoMain.vue";
export default {
  //子组件导入
  components: { TodoHeader, TodoMain, TodoFooter },
  data() {
    return {
      list: JSON.parse(localStorage.getItem("value")) || [],
      //    [
      //     { id: 1, name: "吃饭", isDone: true },
      //     { id: 2, name: "睡觉", isDone: false },
      //     { id: 3, name: "打豆豆", isDone: true },
      //   ],
    };
  },
  methods: {
    del(id) {
      this.list = this.list.filter((item) => {
        return item.id !== id;
      });
    },
    add(value) {
      this.list.push({
        id: Math.random(),
        name: value,
        isDone: false,
        show: true,
      });
    },
    clear() {
      this.list = this.list.filter((item) => {
        return item.isDone === false;
      });
    },
  },
  //所依赖的值发生变化就执行代码，返回新值
  computed: {},
  watch: {
    list: {
      handler(newvaule) {
        localStorage.setItem("value", JSON.stringify(newvaule));
      },
      deep: true,
    },
  },
};
</script>
  
  <style></style>
